<template><el-row>
		<el-col :span="16" :offset="3">
				<el-table :data="subODocs" style="width: 100%" @selection-change="handleSelectionChange">
					<el-table-column type = "selection" prop="psId" width="55"></el-table-column>
					<el-table-column prop="odName" label="公文名称"/>
					<el-table-column prop="odStates" label="处理状态"/>
					<el-table-column label="操作">
						<template #default="scope">
							<router-link :to="{name:'DocumentAuditIndex',params:{odId:scope.row.odId}}">
								<el-button><el-icon><Search /></el-icon></el-button>
							</router-link>
						</template>
					</el-table-column>
				</el-table>
				<el-row>
					<el-col :span="12">
						<el-pagination style="margin: 0 auto;" @current-change="doPaging"
						background layout="prev,pager,next" 
						:page-size="pageSize" :total="oDocs.length"/>
					</el-col>
					<el-col :span="12">
					</el-col>
					
					<el-col :span="2" :offset="11">
						<el-button type="info" size="default" @click="outPut" style="width:100%;" >
							批量导出
						</el-button>
					</el-col>
				</el-row>
		</el-col>
	</el-row>
</template>

<script>
import {saveAs} from 'file-saver';
import { ref } from 'vue'
//import {ElMessage} from 'element-plus'
export default{
	data () {
		return {
			subODocs:[],
			oDocs:[],
			handleValue:ref(''),
			pageSize: 5, 
			docArr:[]
		}
	},
	methods:{
		handleSelectionChange(arr){
			this.docArr = arr
			console.log(arr)
		},
		locateToDocAudit(row){
			console.log(row!=null)
			if(row!=null){
				this.$router.push({ 
					name:'DocumentAuditIndex',
					params:{odId:row.odId}
				});
			}
			this.$router.push({
				name:'DocumentAuditIndex'
			});
		},
		doPaging(curr){
			let start =(curr-1)*this.pageSize
			let end = curr*this.pageSize
			this.subODocs = this.oDocs.slice(start,end)
		},
		oDocsList(){
			let that = this
			this.$axios.get("http://localhost:8080/ODoc/selectODocList").then(function(res){
				
				that.oDocs = res.data
				that.subODocs = that.oDocs.slice(0,that.pageSize)
			})
		},
		dateFormat(time) {
			var date=new Date(time);
			var year=date.getFullYear();
			/* 在日期格式中，月份是从0开始的，因此要加0
			* 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
			* */
			var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
			var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
			var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
			var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
			var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
			// 拼接
			return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
		},
		outPut() {
			let datas = []
			for(let i = 0;i<this.docArr.length;i++){
				datas.push(this.docArr[i].odContent)
			}
			let str = new Blob(datas, {type: 'text/plain;charset=utf-8'})
			saveAs(str, `导出文件.txt`)
		},
	},
	mounted() {
	//显示当前日期时间
		let _this = this// 声明一个变量指向Vue实例this，保证作用域一致
		this.timer = setInterval(() => {
			_this.date = new Date(); // 修改数据date
		}, 1000)
	},
	beforeUnmount() {
		if (this.timer) {
			clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
		}
	},
	created(){
		let that = this
		this.$axios.get("http://localhost:8080/ODoc/selectODocList").then(function(res){
			that.oDocs = res.data;
		})
		this.oDocsList()
	}
}
</script>